import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Alert, Form, Button, Input, Divider, Slider }  from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;
const { TextArea } = Input;
@connect(({ washer, loading }) => ({
  washer,
  loading: loading.models.washer,
}))
@Form.create()
export default class Washer extends PureComponent{

  state = {
    content: '',
    show: 'none',
  };

  componentDidMount(){}

  wash = (content,ratio) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'washer/wash',
      payload: {
        content,
        ratio,
      },
    });
  };

  washSubmit = (e) => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        content: fieldsValue.content,
        show: 'block',
      });
      this.wash(fieldsValue.content, fieldsValue.ratio);
    });
  };

  formatter = (value) => {
    return `洗稿深度: ${value}%`;
  };

  render(){
    const { form, washer: { resultContent }, loading } = this.props;
    const { getFieldDecorator } = form;
    const { content, show } = this.state;
    const html = { __html: resultContent.replace(/\n/g, '<br/>')};
    return (
      <PageHeaderLayout
        title="洗稿助手"
        content={
          <div>
            <p>机器人写手，帮你解放更多人力.</p>
          </div>
        }
      >
        <Card bordered={false}>
          <Alert type="info" message="用户应根据实际所需选择[洗稿深度]，最终生成结果仅供参考，或需要人工再次筛查." closable showIcon />
          <Form onSubmit={this.washSubmit} style={{ marginTop: 20}}>
            <FormItem>
              {getFieldDecorator('content', {
                rules: [{ required: true, message: '必填内容' }, { min: 100, message: '最少100个字符'}],
                initialValue: content,
              })(
                <TextArea placeholder="将文本黏贴在这儿" rows={10} />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('ratio',{
                initialValue: 10,
              })(
                <Slider marks={{10: '洗稿深度: 10%'}} tipFormatter={this.formatter} />
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit" icon="check">开始生成</Button>
            </FormItem>
          </Form>
        </Card>
        <Card bordered={false} loading={loading} style={{ display: show, marginTop: 20}}>
          <Divider> 生成结果 </Divider>
          <div dangerouslySetInnerHTML={html}></div>
        </Card>
      </PageHeaderLayout>
    );
  }
}
